<!doctype html>
<html>
    <head>
        <title>HT CSS动画手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT CSS动画手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_description">概述</a></li><li><a href="#ref_demo">示例</a></li></ul>

<hr/>

<div id="ref_description"></div>

<h3>概述</h3>

<p>为什么使用动画？一个令人信服的理由是动画可以明显提升用户体验，否则突兀的界面变化可能会让用户无所适从。</p>

<p><code>css</code>动画有两种实现方式：<code>transitoin</code>和<code>animation</code>，无论哪种方式，如何用<code>js</code>来驱动都是一件很痛苦的事，比如要把一个<code>id</code>为<code>mydiv</code>的<code>div</code>元素的背景颜色动画地改变为红色，需要以下代码：</p>

<pre><code>var mydiv = document.getElementById(&#39;mydiv&#39;);
mydiv.style.setProperty(&#39;background&#39;, &#39;red&#39;);
mydiv.style.setProperty(&#39;transition&#39;, &#39;background 0.5s&#39;);
mydiv.style.setProperty(&#39;-webkit-transition&#39;, &#39;background 0.5s&#39;);
var handleTransitionEnd = function(e) {
    console.log(e);//动画结束后的自定义逻辑

    mydiv.style.setProperty(&#39;transition&#39;, &#39;&#39;);//动画完成之后的清理工作
    mydiv.style.setProperty(&#39;-webkit-transition&#39;, &#39;&#39;);
    mydiv.removeEventListener(&#39;transitionend&#39;, handleTransitionEnd);
    mydiv.removeEventListener(&#39;webkitTransitionEnd&#39;, handleTransitionEnd);
}
mydiv.addEventListener(&#39;transitionend&#39;, handleTransitionEnd);
mydiv.addEventListener(&#39;webkitTransitionEnd&#39;, handleTransitionEnd);</code></pre>

<p>可以看到，如果用<code>js</code>设置<code>style</code>，我们不但要处理动画本身，还要考虑浏览器兼容性，动画完成之后还要做一些清理工作，简单的改变背景色居然这么多代码！
接下来我们换种解决方案，使用此插件完成这项工作：</p>

<pre><code>ht.Default.animate(&#39;#mydiv&#39;)
            .set(&#39;background&#39;, &#39;red&#39;)
            .end(function(e) {
                console.log(e);//动画结束后的自定义逻辑
            });</code></pre>

<p>这样就清晰多了，<code>animate</code>函数的参数可以是<code>css</code>选择器，也可以是<code>dom</code>对象，之后就可以链状操作多个样式：</p>

<pre><code>ht.Default.animate(&#39;#mydiv&#39;)
            .set(&#39;background&#39;, &#39;red&#39;)
            .set(&#39;opacity&#39;, &#39;0&#39;),
            .scale(2, 2)
            .end(function(e) {
                console.log(e);//动画结束后的自定义逻辑
            });</code></pre>

<p>在这个动画过程中同时改变了<code>background</code>、<code>opacity</code>、<code>transform: scale</code>三个样式，如果采取最原始的方式，代码量和可读性根本无法控制！</p>

<p>此插件还支持动画队列：</p>

<pre><code>ht.Default.animate(&#39;#mydiv&#39;)
            .set(&#39;background&#39;, &#39;red&#39;)
            .set(&#39;opacity&#39;, &#39;0&#39;),
            .scale(2, 2)
            .then()
                .set(&#39;left&#39;, &#39;200px&#39;)
                .set(&#39;top&#39;, &#39;200px&#39;)
            .pop()
            .end(function(e) {
                console.log(e);//动画结束后的自定义逻辑
            });</code></pre>

<p>上面的代码中定义了两个动画，第一个是<code>background</code>、<code>opacity</code>、<code>transform:scale</code>样式的动画过程，
这个动画完成之后再启动第二个动画，改变<code>left</code>和<code>top</code>样式</p>

<p><code>API</code>说明：
此插件在<code>ht.Default</code>上增加了一个<code>animation</code>函数，参数可以是<code>css</code>选择器，也可以是<code>dom</code>对象，返回<code>Animate</code>对象实例(无需通过<code>new</code>关键字创建)，我们上面看到的<code>set</code>、<code>scale</code>、<code>then</code>、<code>end</code>等函数都是此类的公共<code>API</code>，完整的<code>API</code>列表如下：</p>

<ul><li><code>set(prop, propValue)</code> 设置<code>css</code>样式，<code>prop</code>为样式名，如<code>width</code>、<code>opacity</code>等，<code>propValue</code>为样式值，如<code>&#39;200px&#39;</code>， <code>&#39;0&#39;</code>等</li><li><code>then()</code> 在动画队列中加入一个新的动画过程</li><li><code>pop()</code> 返回当前动画过程的上一个动画过程，一般情况下由队列中第一个动画过程调用<code>end()</code>，所以通常调用几个<code>then()</code>就应该调用几个<code>pop()</code></li><li><code>end(callbackFunc)</code> 启动当前的动画过程，可传入一个函数在动画队列完成后被回调</li><li><code>translate(x, y)</code> 转换为<code>transform: translate(x, y)</code>，参数可以为数字(当作<code>&#39;px&#39;</code>处理)，也可以为字符串度量值(<code>&#39;10px&#39;</code>, <code>&#39;20em&#39;</code>等)</li><li><code>translateX(n)</code> 转换为<code>transform: translateX(n)</code> 参数可以为数字或字符串度量值</li><li><code>tx(n)</code> 同<code>translateX(n)</code></li><li><code>translateY(n)</code> 转换为<code>transform: translateY(n)</code> 参数可以为数字或字符串度量值</li><li><code>ty(n)</code> 同<code>translateY(n)</code></li><li><code>scale(x, y)</code> 转换为<code>transform: scale(x, y)</code></li><li><code>scaleX(n)</code> 转换为<code>transform: scaleX(n)</code></li><li><code>scaleY(n)</code> 转换为<code>transform: scaleY(n)</code></li><li><code>rotate(n)</code> 转换为<code>transform: rotate(n)</code></li><li><code>skew(x, y)</code> 转换为<code>transform: skew(x, y)</code></li><li><code>skewX(n)</code> 转换为<code>transform: skewX(n)</code></li><li><code>skewY(n)</code> 转换为<code>transform: skewY(n)</code></li><li><code>duration(n)</code> 设置动画持续时间</li><li><code>delay(n)</code> 设置动画延时启动时间</li><li><p><code>ease(n)</code> 设置缓动方式，除了<code>css</code>内置的缓动方式，<code>HT</code>额外扩展了很多缓动方式，列表如下：</p><ul><li><code>linear</code></li><li><code>ease</code></li><li><code>ease-in</code></li><li><code>ease-out</code></li><li><code>ease-in-out</code></li><li><code>ease-in-quad</code></li><li><code>ease-in-cubic</code></li><li><code>ease-in-quart</code></li><li><code>ease-in-quint</code></li><li><code>ease-in-sine</code></li><li><code>ease-in-expo</code></li><li><code>ease-in-circ</code></li><li><code>ease-in-back</code></li><li><code>ease-out-quad</code></li><li><code>ease-out-cubic</code></li><li><code>ease-out-quart</code></li><li><code>ease-out-quint</code></li><li><code>ease-out-sine</code></li><li><code>ease-out-expo</code></li><li><code>ease-out-circ</code></li><li><code>ease-out-back</code></li><li><code>ease-in-out-quad</code></li><li><code>ease-in-out-cubic</code></li><li><code>ease-in-out-quart</code></li><li><code>ease-in-out-quint</code></li><li><code>ease-in-out-sine</code></li><li><code>ease-in-out-expo</code></li><li><code>ease-in-out-circ</code></li><li><p><code>ease-in-out-back</code></p><p>这些缓动方式的区别可以参考这里：<a href="http://matthewlein.com/ceaser/">缓动曲线</a></p></li></ul></li></ul>

<p>使用此插件之前，需要引入<code>ht-cssanimation.js</code>文件：</p>

<pre><code>&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt; &lt;!--先引入ht.js--&gt;
&lt;script src=&quot;ht-cssanimation.js&quot;&gt;&lt;/script&gt;</code></pre>

<div id="ref_demo"></div>

<h3>示例</h3>

<p>点击下面的例子中的<code>div</code>查看动画效果:</p>

<p><iframe src="examples/example_demo.html" style="height:200px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
